<template>
	<view class="banner" :style="[{ 'background-image': 'url(' + backgroundImg + ')', 'background-size': '100%' }]">
		<view class="top flex ac">
			<image class="user-head" @click="navAccount" :src="userImg"></image>
			<view class="flex-y-c" style="align-items: flex-start;">
				<view class="flex-x-c name-code" v-if="isLogin">
					<button
						@click="navAccount"
						hover-class="none"
						class="user-name"
					>{{ tobJifenParam.realName }}</button>
				</view>
				<button
					hover-class="none"
					open-type="getUserInfo"
					@getuserinfo="login($event)"
					<!-- #ifdef H5 -->
					@click="login($event)"
					<!-- #endif -->
					v-if="!isLogin"
					class="user-name"
				>立即登录</button>
				<text class="user-company line-1" @click="navAccount" v-if="!$globalData.state.ifCakeCard">{{ tobJifenParam.companyName || '********' }}</text>
			</view>
		</view>
		<view class="bottom flex-x-c">
			<button class="integral"
				hover-class="none"
				open-type="getUserInfo"
				@getuserinfo="jumpToIntegral($event)"
				<!-- #ifdef H5 -->
				@click="jumpToIntegral($event)"
				<!-- #endif -->
			>
				<view class="integral-posi flex-x-c">
					<image class="integral-back" src="https://ss.migudm.cn/malleoc/integral/bg_pointpop.png"></image>
					<view class="f26 name flex-x-c">
						<image v-if="tobJifenParam.hasExpire" class="expire-icon" src="https://ss.migudm.cn/malleoc/goods/ci_returns_list_warn@2x.png"></image>
						<view>{{balanceName}}:</view>
					</view>
					<view class="flex-x-c">
						<view class="f26 integral-num line-1">{{ isLogin ? (tobJifen / 100).toFixed(2) : '- -' }}</view>
						<image class="icon" src="https://ss.migudm.cn/malleoc/user/ic_my_integral_more@2x.png"></image>
					</view>
				</view>
			</button>
			<button
			class="integral offline"
			hover-class="none"
			open-type="getUserInfo"
			@getuserinfo="jumpToCode($event)"
			<!-- #ifdef H5 -->
			@click="jumpToCode($event)"
			<!-- #endif -->
			v-if="haveOffline"
			>
				<view class="integral-posi integral-code flex-c">
					<view class="flex-x-c">
						<view>线下消费码</view>
						<image class="offline-img" src="https://ss.migudm.cn/malleoc/integral/qr_code.png"></image>
					</view>
				</view>
			</button>
		</view>

	</view>
</template>

<script>
import config from "@/config.js"
import dfUserImg from '@/components/userDefinedPage/userMsg/assets/img/ic_home_avatar.png';
import icHomeOut from '@/components/userDefinedPage/userMsg/assets/img/ic_home_out.png';
export default {
	data() {
		return {
			trings: '',
			userImg: this.$globalData.state.userInfoDetail.userThumUrl,//用户头像
			nickName: this.$globalData.state.userInfoDetail.nickName,//用户名
			loginOutImg:icHomeOut,//退出登录图片
			bgImg:'https://ss.migudm.cn/mgmall/tob/banner_top.jpeg',
		};
	},
	props: {
		tobJifenParam: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	computed: {
		tobJifen() {
			return this.tobJifenParam.tobJifen || 0
		},
		backgroundImg() {
			const mainImage = this.$globalData.state.frontConfig.mainImage
			return mainImage || this.bgImg
		},
		isLogin() {
			if (this.$globalData.state.token) {
				this.userImg = this.$globalData.state.userInfoDetail.userThumUrl;
				return true;
			} else {
				this.userImg = dfUserImg;
				return false;
			}
		},
		balanceName(){
			const frontConfig = this.$globalData.state.frontConfig
			if (frontConfig.priceUnit == 1) {
				return '余额'
			} else if (frontConfig.priceUnit == 2) {
				return '积分'
			} else {
				return '点卡'
			}
		},
		balanceUnit(){
			return this.$globalData.state.benefitUnit;
		}
	},
	methods: {
		login($event) {
			this.$Login.login({
				wxObj: $event,
				success: () => {
					console.log('已登录！');
				}
			})
		},
		/**跳转到积分记录。云精选云课程不一样
		 * @param {Object} $event 小程序登录参数
		 */
		jumpToIntegral($event) {
			this.$Login.login({
				wxObj: $event,
				success: () => {
					// 和包食堂跳转和包食堂的积分列表
					const url = this.isHeBaoPayBenefit ? '/package_user/integral/hebaoRecord' : '/package_user/integral/integral'
					this.$routeUtils.navigateTo({ url })
				}
			})
		},
		/**
		 * 导航到我的福利个人中心页
		 */
		navAccount() {
			if (!this.$globalData.state.token) return
			this.$routeUtils.navigateTo({
				url: '/package_user/mine/mineBenefits'
			})
		},
		/**
		 * 导航到我的消费券
		 */
		jumpToCode($event) {
			this.$Login.login({
				wxObj: $event,
				success: () => {
					const url = '/package_order/offline/consumeCode'
					this.$routeUtils.navigateTo({ url })
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.integral{
	height: 68rpx;
	position: relative;
	overflow: visible;
	color: #333;
	.icon{
		width: 28rpx;
		height: 28rpx;
	}
	.integral-posi{
		justify-content: space-between;
		padding: 0 10rpx 0 15rpx;
		height: 60rpx;
		min-width: 242rpx;
		border-radius: 10rpx;
		position: relative;
		background-color: rgba(255,255,255,0.8);
		.expire-icon{
			width: 28rpx;
			height: 28rpx;
			margin-right: 4rpx;
		}
		.name{
			flex-shrink: 0;
			line-height: 1;
		}
		.integral-num{
			line-height: 1;
			max-width: 150rpx;
		}
	}
	.integral-code{
		width: 210rpx;
		min-width: 210rpx;
	}
	.integral-back{
		position: absolute;
		top: -8rpx;
		left: 50rpx;
		height: 9rpx;
		width: 28rpx;
	}
	.offline-back{
		width: 210rpx;
		height: 68rpx;
	}
	.offline-img{
		margin-left: 6rpx;
		width: 36rpx;
		height: 36rpx;
	}
}
.offline{
	margin-left: 20rpx;
}

.banner {
	width: 100%;
	height: 368rpx;
	display: inline-block;
	// background: url(~@/components/userDefinedPage/userMsg/assets/img/banner.jpeg) center no-repeat;
	// background-size: 100% 100%;
	position: relative;
	.top {
		margin-top: 144rpx;
		margin-left: 48rpx;
		overflow: visible;
		.name-code{
			position: relative;
			overflow: visible;
			.qr-code{
				width: 32rpx;
				height: 32rpx;
				margin-left: 16rpx;
				transform: translateY(3rpx);
			}
			.code-guide{
				position: absolute;
				width: 112rpx;
				height: 35rpx;
				right: -42rpx;
				top: -28rpx;
			}
		}
		.user-head {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			float: left;
			margin-right: 16rpx;
			background: rgba(226, 226, 226, 1);
		}
		.bind-icon{
			width: 48rpx;
			height: 48rpx;
			margin-left: 8rpx;
		}
		.user-name {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: block;
			text-align: left;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.user-company {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: block;
			text-align: left;
			max-width: 400rpx;
		}
	}

	.bottom {
		margin-top: 17rpx;
		margin-left: 34rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
		text-align: left;
		.iconArraw {
			width: 24rpx;
			height: 24rpx;
			background: url('https://ss.migudm.cn/malleoc/integral/ic_home_jifenmingxi@2x.png') no-repeat center center;
			background-size: 24rpx;
			vertical-align: middle;
			display: inline-block;
		}
	}

	.login-out{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 100rpx;
		right: 24rpx;
	}
}
</style>
